<template>
  <div class="carditem">
    <div class="content">
      <div
        class="video"
        @click="toDetail(itemData.resource.creator?.id || itemData.resource.id)"
      >
        <img :src="itemData.resource.cover" alt="" />
      </div>
      <div class="title">
        <p class="topic">{{ itemData.resource.title }}</p>
        <div class="like">
          <van-icon name="good-job-o" color="#666" size="20" />
          <p class="num" v-if="itemData.resource.author">
            {{
              NumberFilter(itemData.resource.author.userinfo.count.count_liked)
            }}
          </p>
          <p class="num" v-else>
            {{
              NumberFilter(
                likeList.indexOf(itemData.resource.id) != -1
                  ? itemData.resource.creator.count.count_liked + 1
                  : itemData.resource.creator.count.count_liked
              )
            }}
          </p>
        </div>
      </div>
      <div class="author" @click.stop="toUserinfo(itemData.resource.user_id)">
        <div class="avatar">
          <van-image
            width="25rem"
            height="25rem"
            lazy-load
            radius="50%"
            :src="itemData.resource.author.userinfo.avatar"
            v-if="itemData.resource.author"
          />
          <van-image
            width="25rem"
            height="25rem"
            lazy-load
            radius="50%"
            v-else
            :src="itemData.resource.creator.avatar"
          />
        </div>
        <p class="authorname" v-if="itemData.resource.author">
          {{ itemData.resource.author.userinfo.username }}
        </p>
        <p class="authorname" v-else>
          {{ itemData.resource.creator.username }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import { ref } from "vue";

const router = useRouter();
const props = defineProps(["itemData"]);
// console.log(props.itemData);
const likeList = ref(JSON.parse(localStorage.getItem("likeList")) || []);

function toDetail(id) {
  router.push({
    path: "/detail",
    query: {
      id,
    },
  });
}
function toUserinfo(id) {
  router.push({
    path: "/userinfo",
    query: {
      id,
    },
  });
}

const NumberFilter = computed(() => {
  return (value) => {
    // console.log(value);
    if (value < 10000) {
      return value;
    } else {
      let w = value > 10000 ? value / 10000 : value;
      let y = w > 10000 ? (w / 10000).toFixed(1) + "亿" : w.toFixed(1) + "万";
      return y;
    }
  };
});
</script>

<style lang="scss" scoped>
.carditem {
  width: 351rem;
  box-sizing: border-box;
  margin: 15rem 0;
  .content {
    width: 100%;
    height: 300rem;
    background-color: #fff;
    border-radius: 10rem;
    overflow: hidden;
    .video {
      width: 100%;
      height: 200rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: 5rem;
      }
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 15rem 12rem 0rem;
      padding-bottom: 12rem;
      border-bottom: 2rem solid #f5f5f5;
      .topic {
        font-size: 16rem;
        color: #000;
        width: 230rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .like {
        display: flex;
        align-items: center;
        .num {
          font-size: 12rem;
          color: #666;
          height: 20rem;
          line-height: 25rem;
          margin-left: 3rem;
        }
      }
    }
    .author {
      display: flex;
      align-items: center;
      padding: 12rem;
      p {
        font-size: 14rem;
        color: #000;
        margin-left: 10rem;
      }
    }
  }
}
</style>